
body {
    font-family: Quicksand, sans-serif;
    font-style:"Trebuchet MS",Helvetica,sans-serif ;
    margin: 0;
    min-height: 100vh;
    background-color: #abdcff;
    background-image: radial-gradient(closest-side, #2afadf, rgba(42, 250, 223, 0)), radial-gradient(closest-side, #0396ff, rgba(3, 150, 255, 0)), radial-gradient(closest-side, #00eaff, rgba(0, 234, 255, 0)), radial-gradient(closest-side, #736efe, rgba(115, 110, 254, 0)), radial-gradient(closest-side, #c2ffd8, rgba(194, 255, 216, 0));
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
    background-repeat: no-repeat;
    -webkit-animation: movement 10s linear infinite;
    animation: movement 10s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center
}

@-webkit-keyframes movement {
    0%, to {
        background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
        background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax
    }

    25% {
        background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
        background-position: -60vmax -90vmax, 50vmax -40vmax, 0 -20vmax, -40vmax -20vmax, 40vmax 60vmax
    }

    50% {
        background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
        background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0, 20vmax 10vmax, 30vmax 70vmax
    }

    75% {
        background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
        background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0, -10vmax 10vmax, 40vmax 60vmax
    }
}

@keyframes movement {
    0%, to {
        background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
        background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax
    }

    25% {
        background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
        background-position: -60vmax -90vmax, 50vmax -40vmax, 0 -20vmax, -40vmax -20vmax, 40vmax 60vmax
    }

    50% {
        background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
        background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0, 20vmax 10vmax, 30vmax 70vmax
    }

    75% {
        background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
        background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0, -10vmax 10vmax, 40vmax 60vmax
    }
}
#index{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#index div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#index footer{
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-left: 3vh;
    align-items: flex-start;
}
.nav{
    width: 40vw;
    border-radius: 6vh;
    height: 40vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items:center;
}
.nav>a{
    width: 18vw;
    height: 18vw;
    margin-top: 10px;
    border-radius: 6vh;
    background-color: #ffffff80;
    color:#000;
    font-size: 2vw;
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
}
.nav>a>div{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    font-family:"Comic Sans MS", cursive, sans-serif;
}
.main4{

    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main4title{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 60%;
    height: auto;
    border-radius: 30px;
    background-color: #ffffff70;
}
.main4parts{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 70vmax;
}
.main4part{
    display: flex;
    flex-direction: column;

    align-items: center;
    padding: 1vmax;
    margin-left: 2vmax;
    margin-right: 2vmax;
    width: 29vmax;
    margin-top: 20px;
    background-color: #ffffff70;
    border-radius: 40px;
}